<template>
  <div id="wdxx">
    <h3>我的消息</h3>
    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>发送时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in orderMsg" :key="index">
          <td>{{ item.title }}</td>
          <td>{{ item.time }}</td>
          <td>{{ item.state }}</td>
          <td>
            <span>查看</span>丨
            <span @click="removeDdMsg">删除</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'wdxx',
  computed: {
    ...mapState(['orderMsg']),
  },
  methods: {
    // ...mapMutations,
    removeDdMsg(item) {
      this.orderMsg.splice(this.orderMsg.indexOf(item), 1);
    },
  },
};
</script>

<style scoped>
#wdxx {
  padding: 20px 0 0px 20px;
}
#wdxx h3 {
  font-size: 18px;
  color: #333;
  font-weight: normal;
}
table {
  width: 1020px;
  margin-top: 40px;
  border-collapse: collapse;
}
table th {
  font-size: 16px;
  color: #333;
}
table td {
  color: #666;
  font-size: 14px;
}
td,
th {
  border: 1px;
  text-align: center;
  padding: 15px 0;
}
td span {
  color: #4b943d;
  cursor: pointer;
}
</style>
